<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
</head>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    #app {
        width: 94%;
        margin-left: 2%;
        text-align-last: center;
    }
</style>

<body>
    <div id="app">
        <div>
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);margin-left: -40%">采购统计</h1>
                </el-col>
            </el-row>

            <el-form :inline="true">
                <el-form-item label="采购单号">
                    <el-input v-model="buyNumber" placeholder="采购单号"></el-input>
                </el-form-item>
                <el-form-item label="采购员">
                    <el-input v-model="buyer" placeholder="采购员"></el-input>
                </el-form-item>
                <el-form-item label="供应商">
                    <el-input v-model="producername" placeholder="供应商"></el-input>
                </el-form-item>
                <el-form-item label="采购时间">
                    <el-date-picker @change="checkStartDate" value-format="yyyy-MM-dd" v-model="buyTime" type="date"
                        placeholder="开始日期" width="100"></el-date-picker>
                    <el-date-picker @change="checkEndDate" value-format="yyyy-MM-dd" v-model="reachTime" type="date"
                        placeholder="结束日期" width="100"></el-date-picker>
                </el-form-item>
                <el-button @click="select" type="primary">查询</el-button>
            </el-form>

            <el-table :data="tableData" border style="width: 100%;height: 330px">
                <el-table-column prop="buyNumber" label="采购单编号" width="200">
                </el-table-column>
                <el-table-column prop="buyer" label="执行采购人" width="200">
                </el-table-column>
                <el-table-column prop="buyTime" label="采购时间" width="200">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.buyTime).toLocaleDateString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="reachTime" label="到货日期" width="200">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.reachTime).toLocaleDateString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="partname" label="零件名称" width="200">
                </el-table-column>
                <el-table-column prop="buycount" label="采购数量" width="200">
                </el-table-column>
                <el-table-column prop="producername" label="生产商" width="200">
                </el-table-column>

            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            id: 0,
            page: 1,
            limit: 5,
            total: 0,
            currentPage1: 1,
            tableData: [],
            buyer: '',
            producername: '',
            buyTime: '',
            reachTime: '',
            buyNumber: ''
        },
        methods: {
            select() {
                let _this = this;
                selectAjax("post", '/buytable/statis', { buyNumber: _this.buyNumber, reachTime: _this.reachTime, buyer: _this.buyer, producername: _this.producername, buyTime: _this.buyTime, page: _this.page, limit: _this.limit }, _this.tableData2);
            },
            tableData2(data) {
                this.tableData = data.data.data;
                this.total = data.data.total;
            },
            handleSizeChange(val) {
                this.limit = val;
                this.select();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.select();
            },
            closePage() {
                this.page = 1;
                this.limit = 5;
                this.total = 0;
                this.currentPage1 = 1;
            },
            checkEndDate() {
                // 如果结束时间小于开始时间，则将结束时间设置为开始时间
                if (this.buyTime && this.reachTime && new Date(this.reachTime) < new Date(this.buyTime)) {
                    this.reachTime = this.buyTime;
                }
            },
            checkStartDate() {
                // 如果开始时间大于结束时间，则将开始时间设置为结束时间
                if (this.buyTime && this.reachTime && new Date(this.buyTime) > new Date(this.reachTime)) {
                    this.buyTime = this.reachTime;
                }
            }
        },
        mounted() {
            this.select();
        }
    })
</script>

</html>